<!DOCTYPE html>
<html lang="cn" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>食品详情</title>
    <script src="/js/vue.global.js"></script>
    <script src="/js/axios.min.js"></script>
    <style>
        *{
            color: rgb(14, 54, 9);
        }
        body {
            background-image: url('pic/bizhi.jpg');
            background-repeat: no-repeat; /* 背景图片不重复 */
            background-size: cover; /* 背景图片覆盖整个元素 */
            background-position: center; /* 背景图片居中 */
        }
        *{
            font-family: 仿宋;
            margin: 0 auto;

        }
        span{
            margin-left: 20px;
            font-size: 18px;
        }
        a {
            text-decoration: none; /* 去除下划线 */
        }
        span a :hover{
            color: rgb(45, 154, 31);
            font-size: 20px;
        }
        #text-a{
            /*margin-top: 50px;*/
            width: 800px;
            height: 1000px;
            margin-top: 20px;
            /*background-color: antiquewhite;*/
            font-size: 20px;
            border-radius: 18px;
        }
        .text-input{
            margin-left: 30px;
            margin-top: 5px;
        }
        .text-input1{
            width: 250px;
            height: 20px;
        }
    </style>
</head>
<body id="app">
<div id="head-a" style="padding-top: 20px">
    <div style="float: left;margin-left: 20%;">
        <div style="font-family: 幼圆;font-size:36px;color: rgb(45, 154, 31);filter: saturate(200%);float: left;padding-right: 20px">早餐</div>
        <div style="float: left;font-size:20px;margin-top: 12px;padding-right: 20px"><a href="index.html">首页</a></div>

    </div>
    <div style="margin-top: 12px">
        <!--判断用户登录-->
        <span v-if="this.clients.id==-1">
        <span><a href="/registraion.html">注册</a></span>
        <span><a href="/login.html">登录</a></span>
    </span>

        <span v-if="this.clients.id!=-1">
        <span v-text="'用户:'+this.clients.name"></span>
        <span><a href="/cart.html">购物车</a></span>
        <span><a href="/orders.html">我的订单</a></span>
        <span v-on:click="this.unlogin()">退出</span>
    </span>
        <span>
        <a href="/admin/login.html">   进入管理者</a>
    </span>
    </div>


</div>

<div style="clear: both"></div>
<div id="text-a">

    <div style="overflow: hidden;">
        <img v-bind:src="foods.pic" width="800" height="400">
    </div>

    <div v-text="foods.name" class="text-input"></div>
    <div class="text-input">
        详情：<span v-text="foods.detail" style="font-weight: 200"></span>
    </div>
    <div class="text-input">
        价格：<span v-text="'￥'+foods.price"></span>
    </div>
    <div class="text-input">
        库存：<span v-text="foods.num" style="font-width: 800;"></span>
    </div>

    <div class="text-input" style="float: left">
        评论：<input type="text" >
        <button>提交</button>
        <button>点赞</button>
    </div>
    <div style="margin-top: 5px">
        <button style="margin-left: 150px" v-on:click="this.saveCart(foods.id)">加入购物车</button>
        <button onclick="document.getElementById('buy').style.display='block'" style="margin-left: 20px">购买</button>
    </div>
    <div style="clear: both;margin-bottom: 20px"></div>

    <div>

        <div style="display: none;margin-top: 20px" id="buy" >
            <span style="padding-top: 30px;margin-left: 120px;font-size: 20px">请输入购买信息</span>
            <div class="text-input">购买数量：<input type="text" name="num" id="num" v-bind:value="this.num" v-model="this.num" class="text-input1">
                <button v-on:click="sub()">-</button>
                <button v-on:click="add()">+</button>
            </div>
            <!-- 创建一个日期输入框 -->
            <div class="text-input">日&nbsp;&nbsp;&nbsp;&nbsp;期：<input type="date" id="dateInput" class="text-input1"></div>

            <!-- 创建一个时间输入框 -->
            <div class="text-input">时&nbsp;&nbsp;&nbsp;&nbsp;间：<input type="time" id="timeInput" class="text-input1"></div>
            <div class="text-input">打包方式：<select id="isPack" name="isPack" style="height: 20px">
            <option value="0">堂食</option>
            <option value="1">打包</option>
            </select><br>
            </div>
            <div class="text-input">电&nbsp;&nbsp;&nbsp;&nbsp;话：<input type="text" name="phone" id="phone" class="text-input1"></div>
            <div class="text-input">收货地址：<input type="text" id="address" class="text-input1"> <br></div>
            <div class="text-input">支付总价：<span v-text="'￥'+(this.foods.price*this.num)"></span> <br></div>
            <div class="text-input">支付方式：
                <select id="payMethod" name="payMethod" style="height: 20px"><br>
                <option value="1">现金</option>
                <option value="2">支付宝</option>
                <option value="3">微信</option>
                </select><br>
            </div>
            <button v-on:click="this.buy()" style="margin-left: 180px;width: 160px;height: 25px;margin-top: 10px">立即下单</button>
        </div>
    </div>
</div>
</body>
<script>
    //定义vue对象
    const app = {
        //属性
        data() {
            return {
                //显示的食品
                foods: [],

                //购买数量
                num:1,
                //已经登录的客户
                clients:{id:-1}
            }
        },
        //行为
        methods:{
            //按编号获取食品
            getGoodsById:function (){
                console.log(window.location.search)
                axios({
                    method: "post", url: "/getGoodsById?id="+this.getURLSearchParams("id"), data: {}
                }).then((response) => {
                    this.foods=response.data
                });
            },
            //获取登录客户
            getLoginClients:function () {
                axios({
                    method: "post", url: "/getLoginClients", data: {}
                }).then((response) => {
                    this.clients=response.data
                });
            },
            //退出登录
            unlogin:function (typesId) {
                axios({
                    method: "post", url: "/unlogin", data: {}
                }).then((response) => {
                    alert(response.data)
                    window.location.reload() // 刷新
                });
            },
            saveCart:function (foodsId) {
                axios({
                    method: "post", url: "/saveCart", data: {
                        foodsId:foodsId,
                        num:this.num
                    }
                }).then((response) => {
                    alert("加入成功！")
                });
            },
            //下单功能
            buy:function (){
                axios({
                    method: "post", url: "/buy",
                    data: {
                        foodsId:this.foods.id,
                        num:document.getElementById("num").value,
                        takeTime:document.getElementById("dateInput").value+" "+document.getElementById("timeInput").value+":00",
                        isPack:document.getElementById("isPack").value,
                        phone: document.getElementById("phone").value,
                        address:document.getElementById("address").value,
                        payMethod:document.getElementById("payMethod").value
                    }
                }).then((response) => {
                    if(response.data==="ok"){
                        alert("购买成功！")
                        window.location.href="/index.html"
                    }else {
                        alert(response.data)
                    }
                });
            },
            //购买食品增加减少
            add:function (){
                this.num=this.num+1
            },
            sub:function (){
                this.num=this.num-1
            },
            //获取地址栏参数
            getURLSearchParams: function (name) {
                return new URLSearchParams(window.location.search).get(name)

                /** 方法二：正则表达式分割方法：先按?分，再按&分，最后取=后面的值
                 *  name = name.replace(/[\[\]]/g, '\\$&');
                 *     const regex = new RegExp('[?&]' + name + '(=([^&#]*)|&|#|$)'),
                 *         results = regex.exec(window.location.search);
                 *     if (!results) return null;
                 *     if (!results[2]) return '';
                 *     return decodeURIComponent(results[2].replace(/\+/g, ' '));
                 */
            }
        },
        //初始化
        mounted(){
            console.log("页面加载成功！")
            this.getGoodsById()
            this.getLoginClients();
        }
    }

    //启动vue
    Vue.createApp(app).mount("#app")
</script>
</html>